import React, { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom"
import { Pagination } from 'antd'
import axios from "../../http"
import "./css/user.css"
export default function Mainbox() {
    let [keywords, setkeywords] = useState("")
    let [arr, setarr] = useState<any>([])
    let loadoods = async (keywords: string, start = 0) => {
        console.log(1111)
        let res = await axios("/egg/getgoods", { params: { keywords, start } })
        console.log(res, "11111111")
        let newarr = res.data.info//arr.concat(res.data.info)
        setarr(newarr)
    }
    useEffect(() => {
        loadoods(keywords)
    }, [keywords])

    let [page, setpage] = useState(1)
    let [total, settotal] = useState(0)
    useEffect(() => {
        axios("/egg/goodstotal", { params: { keywords } }).then(res => {
            console.log(res.data.info)
            settotal(res.data.info)
        })
    }, [keywords])
    let onChange1 = (arg1, arg2) => {
        console.log(arg1, arg2)
        loadoods(keywords, (arg1 - 1) * 5)//1
    }
    let navigate = useNavigate()
    let godetail = (gid) => {
        navigate({ pathname: "/lisi/detail", search: `gid=${gid}` })
    }
    return (
        <div>
            <input type="text" value={keywords} onChange={(e) => setkeywords(e.target.value)} />
            <div>
                {
                    arr.map((el: any) => (<div onClick={() => godetail(el.gid)} className='goodsbox' key={el.gid}>
                        <p><b>{el.gid}</b></p>
                        <img src={el.img} alt="" />
                        <h1>{el.title}</h1>
                        <p>{el.price}</p>
                        <p>{el.count}</p>
                    </div>))
                }
            </div>
            <Pagination defaultCurrent={page} onChange={onChange1} defaultPageSize={5} total={total} />
        </div>
    )
}
